<template>
<div class="xyt-talk-list" v-if="show">
  <div class="xyt-header flex" @click="close">
    <div class="flex-1">
      <img src="../../assets/img/back.png" alt="">
      <span>聊天列表</span>
      <span class="c-grey">({{ chats.length }})</span>
      </div>
    <div class="c-grey">7天后聊天自动消失</div>
  </div>
  <div class="xyt-talk">
    <van-loading class="xyt-loading" v-if="chats.length === 0 && loading" type="spinner" />
    <div class="xyt-talk-box">
      <template v-for="chat in chats">
        <div class="xyt-talk-item flex" v-if="chat.chat" @click="goTalkWindow(chat)">
          <div class="avatar" :class="{'online': userStatus[chat.create_user_id] === 1}">
            <img :src="chat.chat.icon_url || '/assets/avatar.png'" alt="">
          </div>
          <div class="flex-1">
            <div class="header">{{ chat.chat.name || '匿名用户' }}
              <span class="sex boy">
                <img src="../../assets/img/boy.png" alt="">
              </span>
            </div>
            <!-- <div class="school">中南大学</div> -->
          </div>
          <div class="status">
            <div class="recent">{{ getRecent(chat.chat.recent_time) }}</div>
            <span class="message" v-if="chat.chat.un_read_msg_count > 0">{{ chat.chat.un_read_msg_count }}</span>
          </div>
        </div>
      </template>
    </div>
  </div>
  <TalkWindow ref="talkWindow"></TalkWindow>
</div>
</template>
<script setup>
import { ref } from 'vue';
import TalkWindow from './TalkWindow.vue';
import { queryUserPaperPlans } from './../../api/fly.js'
import moment from 'moment'

let show = ref(false)
let chats = ref([])
let loading = ref(false)
let userStatus = ref({})
let onlineStatus = ref(false)
function open(params, status) {
  onlineStatus.value = !!status
  userStatus.value = params
  show.value = true
  getList()
}
function close() {
  show.value = false
}
let talkWindow = ref(null)
defineExpose({
  open,
  close
})

async function getList() {
  loading.value = true
  chats.value = []
  const res = await queryUserPaperPlans()
  let list = []
  res.result.forEach(item => {
    list.push(item)
  });
  chats.value = list
  loading.value = false
}

function goTalkWindow(chat) {
  chat.chat.un_read_msg_count = 0
  talkWindow.value.open(chat)
}

function getRecent(time) {
  if (time) {
    let now = moment()
    let recent = moment(time)
    let day = now.date() - recent.date()
    let hour = now.hours() - recent.hours()
    let minute = now.minutes() - recent.minutes()
    if (day > 0) {
      return `${day}天前`
    } else if (hour > 0) {
      return `${hour}小时前`
    } else if (minute > 0) {
      return `${minute}分钟前`
    }
  } else {
    return ''
  }
}
</script>
<style scoped lang="scss">
.xyt-talk-list {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #f5f5f5;
  overflow: hidden;
  z-index: 10;
  .xyt-header {
    background-color: #fff;
    line-height: 40px;
    color: #333;
    padding: 0 10px;
    font-size: 15px;
    border-bottom: 1px solid #eee;
    img {
      width: 12px;
      height: 14px;
      vertical-align: top;
      margin-top: 13px;
    }
    .flex-1 {
      font-weight: bold;
    }
    .c-grey {
      color: #c5c5c5;
      font-size: 12px;
    }
  }
}
.xyt-talk {
  position: absolute;
  left: 0;
  top: 43px;
  right: 0;
  bottom: 0;
  background-color: #f5f5f5;
  overflow: auto;
}
.xyt-talk-box {
  background-color: #fff;
}
.xyt-talk-item {
  padding: 8px 8px 8px 0;
  margin-left: 8px;
  background-color: #fff;
  border-bottom: 1px solid #f5f5f5;
  align-items: center;
  .flex-1 {
    padding-left: 8px;
  }
  .avatar {
    position: relative;
    &.online::after {
      content: "";
      position: absolute;
      left: 30px;
      top: 30px;
      width: 12px;
      height: 12px;
      display: block;
      background-color: #7FD670;
      border-radius: 50%;
      border: 2px solid #fff;
    }
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }
  .school {
    color: #aaa;
    font-size: 12px;
  }
  .recent {
    color: #aaa;
    font-size: 12px;
  }
  .status {
    text-align: right;
    color: #48cd8f;
    i {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: #48cd8f;
      vertical-align: middle;
      margin-right: 6px;
    }
  }
  .header {
    font-size: 14px;
    font-weight: 500;
  }
  .sex {
    display: inline-block;
    vertical-align: middle;
    width: 14px;
    height: 10px;
    text-align: center;
    border-radius: 5px;
    img {
      height: 6px;
      vertical-align: top;
      margin-top: 2px;
    }
  }
  .boy {
    background-color: #7F84F9;
  }
  .girl {
    background: #FF7A7F;
  }
  .message {
    display: inline-block;
    height: 14px;
    line-height: 14px;
    background: #FA2F54;
    border-radius: 7px;
    color: #fff;
    font-size: 12px;
    padding: 0 4px;
  }
}
</style>